<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>html学习总结 | 前端攻城狮ZhuoRu</title><meta name="keywords" content="html,张卓如,web,前端"><meta name="author" content="ZhuoRu"><meta name="copyright" content="ZhuoRu"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="baidu-site-verification" content="code-0ABMo98myg"><meta name="description" content="学习目标:了解常用浏览器;掌握WEB标准;理解标签语义化;掌握常用的排版标签;掌握常用的文本格式化图像链接等标签;掌握三种列表标签;掌握表格标签;掌握表格标签;掌握表单标签">
<meta property="og:type" content="article">
<meta property="og:title" content="html学习总结">
<meta property="og:url" content="https://zhangzhuoru.gitee.io/web/post/2020715.html">
<meta property="og:site_name" content="前端攻城狮ZhuoRu">
<meta property="og:description" content="学习目标:了解常用浏览器;掌握WEB标准;理解标签语义化;掌握常用的排版标签;掌握常用的文本格式化图像链接等标签;掌握三种列表标签;掌握表格标签;掌握表格标签;掌握表单标签">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://zhangzhuoru.gitee.io/web/img/tab2.png">
<meta property="article:published_time" content="2022-11-26T16:31:04.712Z">
<meta property="article:modified_time" content="2020-07-14T16:27:23.000Z">
<meta property="article:author" content="ZhuoRu">
<meta property="article:tag" content="html">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://zhangzhuoru.gitee.io/web/img/tab2.png"><link rel="shortcut icon" href="/web/img/favicon.png"><link rel="canonical" href="https://zhangzhuoru.gitee.io/web/post/2020715"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/web/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/web/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":500},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: ZhuoRu","link":"链接: ","source":"来源: 前端攻城狮ZhuoRu","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"top-right"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2020-07-15 00:27:23'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><link rel="stylesheet" href="./css/custom.css"><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/css/function.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><svg aria-hidden="true" style="position:absolute; overflow:hidden; width:0; height:0"><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol><symbol id="icon-moon" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol></svg><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.2"></head><body><div id="loading-box"><div class="pokeball-back"></div><div class="pokeball-loading"><div class="pokeball" id="pokeball-normal"></div><div class="pokeball" id="pokeball-great"></div><div class="pokeball" id="pokeball-ultra"></div><div class="pokeball" id="pokeball-master"></div><div class="pokeball" id="pokeball-safari"></div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="https://thirdqq.qlogo.cn/g?b=sdk&amp;nk=2276839311&amp;s=140" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/web/archives/"><div class="headline">文章</div><div class="length-num">8</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/web/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/web/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/web/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/web/archives/"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span></a></div><div class="menus_item"><a class="site-page" href="/web/sponsorWall/"><i class="fa-fw fas fa-images"></i><span> 赞助墙</span></a></div><div class="menus_item"><a class="site-page" href="/web/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/web/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/web/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/web/other/"><i class="fa-fw fas fa-coffee"></i><span> Demo</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/web/img/tab2.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/web/">前端攻城狮ZhuoRu</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/web/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/web/archives/"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span></a></div><div class="menus_item"><a class="site-page" href="/web/sponsorWall/"><i class="fa-fw fas fa-images"></i><span> 赞助墙</span></a></div><div class="menus_item"><a class="site-page" href="/web/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/web/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/web/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/web/other/"><i class="fa-fw fas fa-coffee"></i><span> Demo</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">html学习总结</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-11-26T16:31:04.712Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2020-07-14T16:27:23.000Z" title="更新于 2020-07-15 00:27:23">2020-07-15</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/web/categories/html/">html</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">8.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>29分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="html学习总结"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="自我介绍"><a href="#自我介绍" class="headerlink" title="自我介绍"></a>自我介绍</h1><p>传智讲师   刘晓强     江湖人称  强哥  </p>
<p>但是不是</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/qq.jpg" /></p>
<p>也不是：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/lk.jpg" /></p>
<p>其实这是我：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/gt.jpg" /></p>
<p>前端基础  html +css    基础班        html 2 +css  7天    9 天 传统布局    +  3天 html 5 +css3 基础</p>
<p>就业班   js     移动web       php + 项目  15      node      vue     框架  微信 …  大前端    </p>
<h1 id="HTML-第一天目标"><a href="#HTML-第一天目标" class="headerlink" title="HTML 第一天目标"></a>HTML 第一天目标</h1><p>能够写出基本的页面（里面包含图片、各种标签和链接）</p>
<h1 id="开发工具"><a href="#开发工具" class="headerlink" title="开发工具"></a>开发工具</h1><p>我们主要用的 开发工具有   chrome  、  sublime 、  photoshop</p>
<h2 id="浏览器（显示）"><a href="#浏览器（显示）" class="headerlink" title="浏览器（显示）"></a>浏览器（显示）</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/b.png" /></p>
<h3 id="查看浏览器占有的市场份额（知晓）"><a href="#查看浏览器占有的市场份额（知晓）" class="headerlink" title="查看浏览器占有的市场份额（知晓）"></a>查看浏览器占有的市场份额（知晓）</h3><p>查看网站： <a href="http://tongji.baidu.com/data/browser" target="_blank">http://tongji.baidu.com/data/browser</a></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/count.png" /></p>
<p> 这些工具你认识几个？</p>
<h2 id="sublime（书写）"><a href="#sublime（书写）" class="headerlink" title="sublime（书写）"></a>sublime（书写）</h2><p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/s.png" /></p>
<p>  普通青年    Dreamweaver</p>
<p>  文艺青年    sublime</p>
<p>  高手和傻子  用记事本</p>
<p>  其实。。。。</p>
<p>  <img src= "/web/img/loading.gif" data-lazy-src="/img/media/node.png" /></p>
<h2 id="Photoshop-协助"><a href="#Photoshop-协助" class="headerlink" title="Photoshop(协助)"></a>Photoshop(协助)</h2><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498465020015.png" alt="1498465020015"></p>
<p>PS 工具是我们使用频率比较高的软件之一， 我们学习PS目的不是为了设计海报做电商和UI的，而是要求：</p>
<ol>
<li><strong>熟练的切图</strong></li>
<li>能和网站美工美眉有共同话题。。。。。</li>
</ol>
<h1 id="认识网页"><a href="#认识网页" class="headerlink" title="认识网页"></a>认识网页</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="media/mi.png"alt=""></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">思考：  网页是如何形成的呢?</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/web.png" /></p>
<h1 id="常见浏览器内核介绍"><a href="#常见浏览器内核介绍" class="headerlink" title="常见浏览器内核介绍"></a>常见浏览器内核介绍</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/b.png" /></p>
<h2 id="浏览器内核（理解）"><a href="#浏览器内核（理解）" class="headerlink" title="浏览器内核（理解）"></a>浏览器内核（理解）</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。</span><br><span class="line">渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。</span><br><span class="line">JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。</span><br><span class="line"></span><br><span class="line">最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。</span><br></pre></td></tr></table></figure>
<p>（1）Trident(IE内核) </p>
<p>国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。</p>
<p>代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。</p>
<p>Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。</p>
<p>（2）Gecko(firefox) </p>
<p>Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。</p>
<p>（3） webkit(Safari)  </p>
<p> Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。</p>
<p> 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。</p>
<p> 代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，</p>
<p>（4） Chromium/Blink(chrome) </p>
<p>   在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。 </p>
<p>​     大部分国产浏览器最新版都采用Blink内核。二次开发</p>
<p>（5） Presto(Opera) </p>
<p>  Presto（已经废弃） 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。  </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">了解一点：</span><br></pre></td></tr></table></figure>
<p>移动端的浏览器内核主要说的是系统内置浏览器的内核。</p>
<p>Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。</p>
<p>iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的</p>
<h1 id="Web标准（重点）"><a href="#Web标准（重点）" class="headerlink" title="Web标准（重点）"></a>Web标准（重点）</h1><p>通过以上浏览器的内核不同，我们知道他们工作原理、解析肯定不同，显示就会有差别。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">问：  哪个语言再全国基本都可以听得懂？ </span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/bz.png" /></p>
<h2 id="Web-标准的好处"><a href="#Web-标准的好处" class="headerlink" title="Web 标准的好处"></a>Web 标准的好处</h2><p><em>1</em>、让Web的发展前景更广阔<br><em>2</em>、内容能被更广泛的设备访问<br><em>3</em>、更容易被搜寻引擎搜索<br><em>4</em>、降低网站流量费用<br><em>5</em>、使网站更易于维护<br><em>6</em>、提高页面浏览速度</p>
<h2 id="Web-标准构成"><a href="#Web-标准构成" class="headerlink" title="Web 标准构成"></a>Web 标准构成</h2><p> Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。</p>
<p>主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 最重要</span><br><span class="line">表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。</span><br><span class="line">行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript</span><br></pre></td></tr></table></figure>
<p>理想状态我们的源码： .HTML    .css   .js </p>
<p>直观感受：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/gx.png" /></p>
<p>总结WEB标准：</p>
<p>结构标准：   <img src= "/web/img/loading.gif" data-lazy-src="/img/media/hb1.png" />  决定你是否有个好天然身体 </p>
<p>表现标准：   <img src= "/web/img/loading.gif" data-lazy-src="/img/media/hb2.png" />  决定你是否打扮的美丽外观</p>
<p>行为标准：   <img src= "/web/img/loading.gif" data-lazy-src="/img/media/hb3.jpg"  width="420"   />  决定你是否有吸引人的行为</p>
<h2 id="课堂一练："><a href="#课堂一练：" class="headerlink" title="课堂一练："></a>课堂一练：</h2><p><strong>1.关于WEB标准下列说法正确的是: </strong></p>
<p>A html决定页面的行为，css决定页面的样式，js决定页面的结构</p>
<p>B html决定页面的样式，css决定页面的结构，js决定页面的行为</p>
<p>C html决定页面的结构，css决定页面的样式，js决定页面的行为</p>
<p>D 以上都不正确</p>
<p>2 <strong>web 标准里边规定三层分离不包括哪部分</strong></p>
<p>A．HTML</p>
<p>B．CSS</p>
<p>C．JavaScript</p>
<p>D．PHP</p>
<p>3.<strong>关于WEB标准下列说法正确的是</strong></p>
<p>A．html相当于人的动作行为，CSS相当于人的穿着打扮，javascript相当于人的骨架结构；</p>
<p>B．html相当于人的骨架结构，CSS相当于人的穿着打扮，javascript相当于人的动作行为；</p>
<p>C．html相当于人的穿着打扮，CSS相当于人的骨架结构，javascript相当于人的动作行为；</p>
<p>D．html相当于人的骨架结构，CSS相当于人的动作行为，javascript相当于人的穿着打扮；</p>
<h1 id="HTML-初识"><a href="#HTML-初识" class="headerlink" title="HTML 初识"></a>HTML 初识</h1><p>一般先学习HTML+CSS， 这里我们先定一个小目标，先学HTML,后学习CSS。</p>
<p>HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。</p>
<p>所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span> 我是一个大标题 <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>   注意：   体会 文本    标签    语言   几个词语</p>
<ul>
<li>HTML 指的是超文本标记语言 (<strong>H</strong>yper <strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage)</li>
<li>HTML 不是一种编程语言，而是一种标记语言 (markup language)</li>
<li>标记语言是一套标记标签 (markup tag)</li>
</ul>
<p>总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。 </p>
<p>用文字来描述网页标签</p>
<h2 id="HTML骨架格式"><a href="#HTML骨架格式" class="headerlink" title="HTML骨架格式"></a>HTML骨架格式</h2><p>日常生活的书信，我们要遵循共同的约定。 </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/mess.png" alt=""></p>
<p>同理：HTML 有自己的语言语法骨架格式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">HTML</span>&gt;</span>   </span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span>     </span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">HTML</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>课堂练习1：    书写我们的第一个HTML 页面！</p>
<ol>
<li>新建一个demo 的 TXT 文件。</li>
<li>里面写入刚才的HTML 骨架。月薪过万 你我之间  黑马洗练  一飞冲天</li>
<li>把后缀名改为 .HTML。</li>
<li>右击—谷歌浏览器打开。</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">1 HTML标签：</span><br><span class="line"></span><br><span class="line">作用所有HTML中标签的一个根节点。 最大的标签   根标签</span><br><span class="line"></span><br><span class="line">2 head标签： 文档的头部</span><br><span class="line"></span><br><span class="line">文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。</span><br><span class="line"></span><br><span class="line">注意在head标签中我们必须要设置的标签是title</span><br><span class="line"></span><br><span class="line">3.title标签： 文档的标题</span><br><span class="line"></span><br><span class="line">作用：让页面拥有一个属于自己的标题。</span><br><span class="line"></span><br><span class="line">4.body标签：文档的主体  以后我们的页面内容 基本都是放到body里面的</span><br><span class="line"></span><br><span class="line">body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）</span><br></pre></td></tr></table></figure>
<p>为了便于记忆，我们请出刚才要辞职回家养猪的二师兄来帮忙， 我称之为  猪八戒记忆法</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/pig.png" /></p>
<h2 id="HTML标签分类"><a href="#HTML标签分类" class="headerlink" title="HTML标签分类"></a>HTML标签分类</h2><p>  在HTML页面中，带有“&lt; &gt;”符号的元素被称为HTML标签，如上面提到的 &lt;HTML&gt;、&lt;head&gt;、&lt;body&gt;都是HTML骨架结构标签。所谓标签就是放在“&lt; &gt;” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素</p>
<p>1.双标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">标签名</span>&gt;</span> 内容 <span class="tag">&lt;/<span class="name">标签名</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>该语法中“&lt;标签名&gt;”表示该标签的作用开始，一般称为“开始标签（start tag）”，“&lt;/标签名&gt;” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。</p>
<blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">比如 <span class="tag">&lt;<span class="name">body</span>&gt;</span>我是文字  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
</blockquote>
<p>2.单标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">标签名</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>  单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。</p>
<blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">比如  <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br></pre></td></tr></table></figure>
</blockquote>
<h2 id="HTML标签关系"><a href="#HTML标签关系" class="headerlink" title="HTML标签关系"></a>HTML标签关系</h2><p>标签的相互关系就分为两种：</p>
<p>1.嵌套关系</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span>  <span class="tag">&lt;<span class="name">title</span>&gt;</span> <span class="tag">&lt;/<span class="name">title</span>&gt;</span>  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/father.jpg"></p>
<p>2.并列关系</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/xiong.jpg"></p>
<p>倡议： 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。</p>
<h2 id="课堂一练"><a href="#课堂一练" class="headerlink" title="课堂一练"></a>课堂一练</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">请问下列哪个标签是错误的？</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">A  &lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">B  &lt;strong&gt;&lt;div&gt;&lt;/div&gt;&lt;/strong&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">C  &lt;head&gt;&lt;title&gt;&lt;/head&gt;&lt;/title&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">D  &lt;body&gt;&lt;div&gt;&lt;/div&gt;&lt;/body&gt;</span><br></pre></td></tr></table></figure>
<p>  <a href="key.HTML" target="_blank">sublime 一些常用快捷键  点我查看 </a></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">再页面中输入 以下2个单词</span><br><span class="line">1.  html: 5   </span><br><span class="line">2.  !</span><br><span class="line">   在sublime里面然后按下tab键盘即可生成HTML骨架</span><br></pre></td></tr></table></figure>
<h1 id="文档类型-lt-DOCTYPE-gt"><a href="#文档类型-lt-DOCTYPE-gt" class="headerlink" title="文档类型&lt;!DOCTYPE&gt;"></a>文档类型&lt;!DOCTYPE&gt;</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span> </span><br></pre></td></tr></table></figure>
<p>同学你用啥手机？你咋回答？  </p>
<p>这句话就是告诉我们使用哪个html版本？  我们使用的是 html 5 的版本。  html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。</p>
<p>&lt;!DOCTYPE&gt; 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用&lt;!DOCTYPE&gt;标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。</p>
<p>注意：  一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。</p>
<h1 id="字符集"><a href="#字符集" class="headerlink" title="字符集"></a>字符集</h1><meta charset="UTF-8" />

<p>utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。</p>
<p>gb2312 简单中文  包括6763个汉字</p>
<p>BIG5   繁体中文 港澳台等用</p>
<p>GBK包含全部中文字符    是GB2312的扩展，加入对繁体字的支持，兼容GB2312</p>
<p>UTF-8则包含全世界所有国家需要用到的字符</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。</span><br></pre></td></tr></table></figure>
<h1 id="HTML标签的语义化"><a href="#HTML标签的语义化" class="headerlink" title="HTML标签的语义化"></a>HTML标签的语义化</h1><p>白话： 所谓标签语义化，就是指标签的含义。</p>
<h2 id="为什么要有语义化标签"><a href="#为什么要有语义化标签" class="headerlink" title="为什么要有语义化标签"></a>为什么要有语义化标签</h2><ol>
<li><p>方便代码的阅读和维护</p>
</li>
<li><p>同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容 </p>
</li>
<li><p>使用语义化标签会具有更好地搜索引擎优化 </p>
</li>
</ol>
<p>核心：合适的地方给一个最为合理的标签。</p>
<p>语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。</p>
<p>白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。</p>
<p>遵循的原则：先确定语义的HTML ，再选合适的CSS。</p>
<h1 id="HTML常用标签"><a href="#HTML常用标签" class="headerlink" title="HTML常用标签"></a>HTML常用标签</h1><p> 首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。</p>
<p> HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。 </p>
<h2 id="排版标签"><a href="#排版标签" class="headerlink" title="排版标签"></a>排版标签</h2><p>排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。</p>
<h3 id="标题标签-熟记"><a href="#标题标签-熟记" class="headerlink" title="标题标签 (熟记)"></a>标题标签 (熟记)</h3><p> 单词缩写：  head   头部. 标题     title  文档标题</p>
<p>为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1&gt;、&lt;h2&gt;、&lt;h3&gt;、&lt;h4&gt;、&lt;h5&gt;和&lt;h6&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">标题标签语义：  作为标题使用，并且依据重要性递减</span><br></pre></td></tr></table></figure>
<p>其基本语法格式如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;hn&gt;   标题文本   &lt;/hn&gt;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意：  h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。</p>
</blockquote>
<p>  <img src= "/web/img/loading.gif" data-lazy-src="/img/media/dog.gif" /></p>
<h3 id="段落标签-熟记"><a href="#段落标签-熟记" class="headerlink" title="段落标签( 熟记)"></a>段落标签( 熟记)</h3><p>单词缩写：  paragraph  段落  [ˈpærəgræf]    无须记这个单词</p>
<p> 在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>  文本内容  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。</p>
<h3 id="水平线标签-认识"><a href="#水平线标签-认识" class="headerlink" title="水平线标签(认识)"></a>水平线标签(认识)</h3><p>单词缩写：  horizontal  横线    [ˌhɔrəˈzɑntl]    同上</p>
<p>在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span>是单标签</span><br></pre></td></tr></table></figure>
<p> 在网页中显示默认样式的水平线。</p>
<p>课堂练习2：    新闻页面 </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/sh.png" /> </p>
<h3 id="换行标签-熟记"><a href="#换行标签-熟记" class="headerlink" title="换行标签(熟记)"></a>换行标签(熟记)</h3><p>单词缩写：  break   打断 ,换行</p>
<p>在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>这时如果还像在word中直接敲回车键换行就不起作用了。</p>
<h2 id="课堂一练-1"><a href="#课堂一练-1" class="headerlink" title="课堂一练"></a>课堂一练</h2><p>1关于标签下列说法正确的是 </p>
<p>(A) P1是段落标签</p>
<p>(B) H1 是标题标签</p>
<p>(C) Hr是换行标签</p>
<p>(D) Br 是一条直线</p>
<p> 2 关于标签下列说法不正确的是</p>
<p>(A) H标签有6个等级分别是<code>&lt;h1&gt; &lt;h2&gt; &lt;h3&gt; &lt;h4&gt; &lt;h5&gt;和&lt;h6&gt;</code></p>
<p>(B) h1到h6 文字从小到大 </p>
<p>(C) p标签一行只能放一个</p>
<p>(D) P是段落标签会给文字加上段落的语义</p>
<h3 id="div-span标签-重点"><a href="#div-span标签-重点" class="headerlink" title="div span标签(重点)"></a>div span标签(重点)</h3><p>div  span    是没有语义的     是我们网页布局主要的2个盒子     css+div</p>
<p>div 就是  division  的缩写   分割， 分区的意思  其实有很多div 来组合网页。</p>
<p>span, 跨度，跨距；范围    </p>
<p>语法格式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span> 这是头部 <span class="tag">&lt;/<span class="name">div</span>&gt;</span>    <span class="tag">&lt;<span class="name">span</span>&gt;</span>今日价格<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="文本格式化标签-熟记"><a href="#文本格式化标签-熟记" class="headerlink" title="文本格式化标签(熟记)"></a>文本格式化标签(熟记)</h2><p>在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/tab.png" /></p>
<p>  b  i  s  u   只有使用 没有 强调的意思       strong   em  del   ins  语义更强烈</p>
<h2 id="标签属性"><a href="#标签属性" class="headerlink" title="标签属性"></a>标签属性</h2><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/ttt.jpg" width="300"  /></p>
<p>属性就是特性 比如 手机的颜色 手机的尺寸 ，总结就是手机的。。</p>
<p>手机的颜色是黑色   手机的尺寸是 8寸</p>
<p>水平线的长度是 200  </p>
<p>图片的宽度 是  300    键  值对</p>
<p>使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">标签名</span> <span class="attr">属性1</span>=<span class="string">&quot;属性值1&quot;</span> <span class="attr">属性2</span>=<span class="string">&quot;属性值2&quot;</span> …&gt;</span> 内容 <span class="tag">&lt;/<span class="name">标签名</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>在上面的语法中，</p>
<p>1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。</p>
<p>2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。</p>
<p>3.任何标签的属性都有默认值，省略该属性则取默认值。</p>
<p>采取  键值对 的格式   key=”value”  的格式  </p>
<p>比如:  </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">hr</span> <span class="attr">width</span>=<span class="string">&quot;400&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>属性  是 宽度  </p>
<p>值    是 400 </p>
<p>提倡：   尽量不使用 样式属性。   <img src= "/web/img/loading.gif" data-lazy-src="/img/media/sm.jpg" /> </p>
<h2 id="图像标签img-重点"><a href="#图像标签img-重点" class="headerlink" title="图像标签img (重点)"></a>图像标签img (重点)</h2><p>单词缩写：   image  图像</p>
<p>HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：</p>
<p>该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;图像URL&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/img.png" /></p>
<p><strong>当网页显示图片时,鼠标滑上图片显示文字描述是以下哪个属性<em>**</em></strong></p>
<p>(A) 设置alt属性</p>
<p>(B) 设置title属性</p>
<p>(C) 设置href 属性</p>
<p>(D) 设置src 属性</p>
<p><strong>2  在HTML中，使用<img>标签插入图像，下列选项关于<img>的src属性说法正确的是 </strong></p>
<p>(A) 用来设置图片的格式</p>
<p>(B) 用来设置图片的所在位置</p>
<p>(C) 用来设置鼠标指向图片时显示的文字</p>
<p>(D) 用来设置图片是否能正确显示 </p>
<h2 id="链接标签-重点"><a href="#链接标签-重点" class="headerlink" title="链接标签(重点)"></a>链接标签(重点)</h2><p>单词缩写：  anchor 的缩写  [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的</p>
<p>在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;跳转目标&quot;</span> <span class="attr">target</span>=<span class="string">&quot;目标窗口的弹出方式&quot;</span>&gt;</span>文本或图像<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。  Hypertext Reference的缩写。意思是超文本引用</p>
<p>target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。</p>
<p>注意：</p>
<p>1.外部链接 需要添加 http:// www.baidu.com</p>
<p>2.内部链接 直接链接内部页面名称即可 比如 &lt; a href=”index.html”&gt; 首页 &lt;/a &gt;</p>
<p>3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。</p>
<p>4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。</p>
<h3 id="锚点定位-（难点）"><a href="#锚点定位-（难点）" class="headerlink" title="锚点定位 （难点）"></a>锚点定位 （难点）</h3><p>通过创建锚点链接，用户能够快速定位到目标内容。<br>创建锚点链接分为两步：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1.使用“a href=”#id名&gt;“链接文本&quot;<span class="tag">&lt;/<span class="name">a</span>&gt;</span>创建链接文本（被点击的）</span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#two&quot;</span>&gt;</span>   </span><br><span class="line"></span><br><span class="line">2.使用相应的id名标注跳转目标的位置。</span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">&quot;two&quot;</span>&gt;</span>第2集<span class="tag">&lt;/<span class="name">h3</span>&gt;</span> </span><br></pre></td></tr></table></figure>
<h3 id="base-标签-基本的"><a href="#base-标签-基本的" class="headerlink" title="base 标签   基本的"></a>base 标签   基本的</h3><p>base 可以设置整体链接的打开状态   </p>
<p>base 写到  <head>  </head>  之间</p>
<p>把所有的连接 都默认添加 target=”_blank”</p>
<p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/base.png" /></p>
<h2 id="课堂一练-2"><a href="#课堂一练-2" class="headerlink" title="课堂一练"></a>课堂一练</h2><p> 1在HTML中，关于a标签说法不正确的是（）</p>
<p>(A) a标签可以通过href属性跳转到另外一个页面</p>
<p>(B) a标签可以通过targer属性设置在是否在新窗口中打开</p>
<p>(C) a标签只能在当前页面设置锚点链接，让用户能够快速定位到目标内</p>
<p>(D) a标签可以通过href=”#”设置一个空链接</p>
<p>2如果想跳转到当前页面里名为show的锚点，下列写法是正确的</p>
<p>A  &lt; a href=”.show”&gt;跳转&lt;/a&gt;</p>
<p>B &lt; a href=”#show”&gt;跳转&lt;/a&gt;</p>
<p>C &lt; a href=” show”&gt;跳转&lt;/a&gt;</p>
<p>D &lt; a src=” #show”&gt;跳转&lt;/a&gt;</p>
<p>3如果想跳转到同目录下的名为success.html文件里名为show的锚点，下列写法是正确的</p>
<p>(A) &lt; a href=”success.html#show”&gt;跳转&lt;/a&gt;</p>
<p>(B)  &lt; a href=”#show”&gt;跳转&lt;/a&gt; </p>
<p>(C)  &lt; a href=”success#show”&gt;跳转&lt;/a&gt;<br>(D) &lt; a src=”success.html#show”&gt;跳转&lt;/a&gt;</p>
<h2 id="特殊字符标签-（理解）"><a href="#特殊字符标签-（理解）" class="headerlink" title="特殊字符标签 （理解）"></a>特殊字符标签 （理解）</h2><p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/zifu.png" /></p>
<h2 id="注释标签"><a href="#注释标签" class="headerlink" title="注释标签"></a>注释标签</h2><p>在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：<br>​        </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 注释语句 --&gt;</span>   ctrl + /       或者 ctrl +shift + / </span><br></pre></td></tr></table></figure>
<p>注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。</p>
<p>注释重要性：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/zs.png" /></p>
<h1 id="路径-重点、难点"><a href="#路径-重点、难点" class="headerlink" title="路径(重点、难点)"></a>路径(重点、难点)</h1><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/dt.png" width="400" /></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/lj.png" /></p>
<p>实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。</p>
<p>根目录  当前目录 </p>
<p>路径可以分为： 相对路径和绝对路径</p>
<h2 id="相对路径"><a href="#相对路径" class="headerlink" title="相对路径"></a>相对路径</h2><p>以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。</p>
<ol>
<li>图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如&lt;img src=”logo.gif” /&gt;。</li>
<li>图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如&lt;img src=”img/img01/logo.gif” /&gt;。</li>
<li>图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如&lt;img src=”../logo.gif” /&gt;。</li>
</ol>
<h2 id="绝对路径"><a href="#绝对路径" class="headerlink" title="绝对路径"></a>绝对路径</h2><p>绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的</p>
<p>“D:\web\img\logo.gif”，或完整的网络地址，例如“<a target="_blank" rel="noopener" href="http://www.itcast.cn/images/logo.gif”。">http://www.itcast.cn/images/logo.gif”。</a></p>
<h2 id="课堂一练-3"><a href="#课堂一练-3" class="headerlink" title="课堂一练"></a>课堂一练</h2><p>1.<strong>在下面结构中，哪种写法可以在index页面中有输出img.gif</strong></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1512226080266.png" alt="1512226080266"></p>
<p>(A) <code>&lt;img src=&quot;../image/img.gif&quot; /&gt;</code>        </p>
<p>(B) <code>&lt;img src=&quot;image/img.gif&quot; /&gt;</code></p>
<p>(C) <code>&lt;img src=&quot;image../img.gif&quot; /&gt;</code></p>
<p>(D) <code>&lt;img src=&quot;img.gif/image&quot; /&gt;</code></p>
<p><strong>2在下面结构中，哪种写法可以在index页面中有输出1.jpg</strong></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1512226099480.png" alt="1512226099480"></p>
<p>(A) <code>&lt;img src=&quot;../1/2/1.jpg&quot; /&gt;</code></p>
<p>(B) <code>&lt;img src=&quot;/1/2/1.jpg&quot; /&gt;</code></p>
<p>(C) <code>&lt;img src=&quot;1/2/1.jpg&quot; /&gt;</code></p>
<p>(D)<code>&lt;img src=&quot;1.jpg&quot; /&gt;</code></p>
<p>3在下面结构中哪种写法可以在index页面中有输出img.gif</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1512226121609.png" alt="1512226121609"></p>
<p>(A) <code>&lt;img src=&quot;demo/image/img.gif&quot; /&gt;</code></p>
<p>(B) <code>&lt;img src=&quot;image/img.gif&quot; /&gt;</code></p>
<p>(C) <code>&lt;img src=&quot;image../img.gif&quot; /&gt;</code>    </p>
<p>(D) <code>&lt;img src=&quot;img.gif/image/demo&quot; /&gt;</code></p>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>  每一天都有一个主题 我们HTML第一天的主题就是 &lt;认识标签&gt;</p>
<p>学HTML 之前 觉得 很神秘  </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/z.png" /></p>
<p>等你学完之后忽然发现</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/rh.jpg" width="615" /></p>
<p>总结今天的思路贯穿线：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/a.png" width="1000" /></p>
<h1 id="列表标签"><a href="#列表标签" class="headerlink" title="列表标签"></a>列表标签</h1><p>什么是列表？</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/list.png" /></p>
<p>把…制成表,以表显示</p>
<p>容器里面装载着文字或图表的一种形式，叫列表。</p>
<p>列表最大的特点就是  整齐 、整洁、 有序</p>
<h2 id="无序列表-ul-（重点）"><a href="#无序列表-ul-（重点）" class="headerlink" title="无序列表 ul （重点）"></a>无序列表 ul （重点）</h2><p>无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  ......</span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/ul.png" /></p>
<p>脚下留心：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1. &lt;ul&gt;&lt;/ul&gt;中只能嵌套&lt;li&gt;&lt;/li&gt;，直接在&lt;ul&gt;&lt;/ul&gt;标签中输入其他标签或者文字的做法是不被允许的。</span><br><span class="line">2. &lt;li&gt;与&lt;/li&gt;之间相当于一个容器，可以容纳所有元素。</span><br><span class="line">3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！</span><br></pre></td></tr></table></figure>
<h2 id="有序列表-ol-（了解）"><a href="#有序列表-ol-（了解）" class="headerlink" title="有序列表 ol （了解）"></a>有序列表 ol （了解）</h2><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/gold.png" /></p>
<p>有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  ......</span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>  所有特性基本与ul 一致。  </p>
<p>  但是实际工作中， 较少用 ol img src=”media/1.jpg” /&gt;</p>
<h2 id="自定义列表（理解）"><a href="#自定义列表（理解）" class="headerlink" title="自定义列表（理解）"></a>自定义列表（理解）</h2><p>定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span>&gt;</span>名词1<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词1解释1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词1解释2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span>&gt;</span>名词2<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词2解释1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词2解释2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/2.jpg" /> </p>
<p>用的还可以：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/mix.png" /></p>
<h1 id="表格-table-会使用"><a href="#表格-table-会使用" class="headerlink" title="表格 table(会使用)"></a>表格 table(会使用)</h1><p><img src= "/web/img/loading.gif" data-lazy-src="http://zcr4.ncfstatic.com/attachment/201403/27/10/5333888008f05_thumb_670x0.jpg" alt="img"></p>
<p>存在即是合理的。  表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/table.png" /></p>
<p>ps:  这些地方用表格，你会觉得生活还是那么美好。。。。忍不住想说  PPAP i hava a pen  </p>
<h2 id="创建表格"><a href="#创建表格" class="headerlink" title="创建表格"></a>创建表格</h2><p>在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>单元格内的文字<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>在上面的语法中包含三对HTML标签，分别为 &lt;table&gt;&lt;/table&gt;、&lt;tr&gt;&lt;/tr&gt;、&lt;td&gt;&lt;/td&gt;，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1.table用于定义一个表格。</span><br><span class="line"></span><br><span class="line">2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。</span><br><span class="line"></span><br><span class="line">3.td /td：用于定义表格中的单元格，必须嵌套在&lt;tr&gt;&lt;/tr&gt;标签中，一对 &lt;tr&gt; &lt;/tr&gt;中包含几对&lt;td&gt;&lt;/td&gt;，就表示该行中有多少列（或多少个单元格）。</span><br></pre></td></tr></table></figure>
<p>注意：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">1. &lt;tr&gt;&lt;/tr&gt;中只能嵌套&lt;td&gt;&lt;/td&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">2. &lt;td&gt;&lt;/td&gt;标签，他就像一个容器，可以容纳所有的元素</span><br></pre></td></tr></table></figure>
<h2 id="表格属性"><a href="#表格属性" class="headerlink" title="表格属性"></a>表格属性</h2><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/tt.png" /></p>
<h2 id="表头标签"><a href="#表头标签" class="headerlink" title="表头标签"></a>表头标签</h2><p>表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签&lt;th&gt;&lt;/th&gt;替代相应的单元格标签&lt;td&gt;&lt;/td&gt;即可。</p>
<p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/th.png" /></p>
<h2 id="表格结构（了解）"><a href="#表格结构（了解）" class="headerlink" title="表格结构（了解）"></a>表格结构（了解）</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：</span><br><span class="line"></span><br><span class="line">&lt;thead&gt;&lt;/thead&gt;：用于定义表格的头部。</span><br><span class="line"></span><br><span class="line">必须位于&lt;table&gt;&lt;/table&gt; 标签中，一般包含网页的logo和导航等头部信息。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;tbody&gt;&lt;/tbody&gt;：用于定义表格的主体。</span><br><span class="line"></span><br><span class="line">位于&lt;table&gt;&lt;/table&gt;标签中，一般包含网页中除头部和底部之外的其他内容。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/thead.png" /></p>
<h2 id="表格标题"><a href="#表格标题" class="headerlink" title="表格标题"></a>表格标题</h2><p><strong>表格的标题： caption</strong></p>
<p><strong>定义和用法</strong></p>
<p>caption 元素定义表格标题。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">caption</span>&gt;</span>我是表格标题<span class="tag">&lt;/<span class="name">caption</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。</p>
<h2 id="合并单元格-难点"><a href="#合并单元格-难点" class="headerlink" title="合并单元格(难点)"></a>合并单元格(难点)</h2><p>跨行合并：rowspan    跨列合并：colspan</p>
<p>合并单元格的思想：</p>
<p>​     将多个内容合并的时候，就会有多余的东西，把它删除。    例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。</p>
<p>​     公式：  删除的个数  =  合并的个数  - 1   </p>
<p>   合并的顺序 先上   先左 </p>
<h2 id="总结表格"><a href="#总结表格" class="headerlink" title="总结表格"></a>总结表格</h2><ol>
<li><p>表格提供了HTML 中定义表格式数据的方法。</p>
</li>
<li><p>表格中由行中的单元格组成。</p>
</li>
<li><p>表格中没有列元素，列的个数取决于行的单元格个数。</p>
</li>
<li><p>表格不要纠结于外观，那是CSS 的作用。</p>
</li>
</ol>
<p>   <strong>表格的学习要求：  能手写表格结构，并且能合并单元格。</strong></p>
<h1 id="表单标签-掌握"><a href="#表单标签-掌握" class="headerlink" title="表单标签(掌握)"></a>表单标签(掌握)</h1><p>现实中的表单，类似我们去银行办理信用卡填写的单子。 如下图</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/car.jpg"  width="500" /></p>
<p>目的是为了收集用户信息。</p>
<p>在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。</p>
<p>在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/bd.png" /></p>
<p>  表单控件：</p>
<p>​       包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。</p>
<p>  提示信息：</p>
<p>​        一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。</p>
<p>  表单域：  </p>
<p>​      他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。</p>
<h2 id="input-控件-重点"><a href="#input-控件-重点" class="headerlink" title="input 控件(重点)"></a>input 控件(重点)</h2><p>在上面的语法中，&lt;input /&gt;标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，&lt;input /&gt;标签还可以定义很多其他的属性，其常用属性如下表所示。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/input.png" /></p>
<h2 id="label标签-理解"><a href="#label标签-理解" class="headerlink" title="label标签(理解)"></a>label标签(理解)</h2><p>label 标签为 input 元素定义标注（标签）。</p>
<p>作用：  用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点</p>
<p>如何绑定元素呢？</p>
<p>for 属性规定 label 与哪个表单元素绑定。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;male&quot;</span>&gt;</span>Male<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">id</span>=<span class="string">&quot;male&quot;</span> <span class="attr">value</span>=<span class="string">&quot;male&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="textarea控件-文本域"><a href="#textarea控件-文本域" class="headerlink" title="textarea控件(文本域)"></a>textarea控件(文本域)</h2><p>如果需要输入大量的信息，就需要用到&lt;textarea&gt;&lt;/textarea&gt;标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">cols</span>=<span class="string">&quot;每行中的字符数&quot;</span> <span class="attr">rows</span>=<span class="string">&quot;显示的行数&quot;</span>&gt;</span></span><br><span class="line">  文本内容</span><br><span class="line"><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/textarea.png" /></p>
<h2 id="下拉菜单"><a href="#下拉菜单" class="headerlink" title="下拉菜单"></a>下拉菜单</h2><p>使用select控件定义下拉菜单的基本语法格式如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项1<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项2<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项3<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>注意：</p>
<ol>
<li>&lt;select&gt;&lt;/select&gt;中至少应包含一对&lt;option&gt;&lt;/option&gt;。</li>
<li>在option 中定义selected =” selected “时，当前项即为默认选中项。</li>
</ol>
<h2 id="表单域"><a href="#表单域" class="headerlink" title="表单域"></a>表单域</h2><p>在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;url地址&quot;</span> <span class="attr">method</span>=<span class="string">&quot;提交方式&quot;</span> <span class="attr">name</span>=<span class="string">&quot;表单名称&quot;</span>&gt;</span></span><br><span class="line">  各种表单控件</span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>常用属性：</p>
<ol>
<li>Action<br>在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。</li>
<li>method<br>用于设置表单数据的提交方式，其取值为get或post。</li>
<li>name<br>用于指定表单的名称，以区分同一个页面中的多个表单。</li>
</ol>
<p>注意：  每个表单都应该有自己表单域。</p>
<h1 id="查文档"><a href="#查文档" class="headerlink" title="查文档"></a>查文档</h1><p>经常查阅文档是一个非常好的学习习惯。</p>
<p>W3C :  <a target="_blank" rel="noopener" href="http://www.w3school.com.cn/">http://www.w3school.com.cn/</a></p>
<p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/">https://developer.mozilla.org/zh-CN/</a></p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">ZhuoRu</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://zhangzhuoru.gitee.io/web/post/2020715.html">https://zhangzhuoru.gitee.io/web/post/2020715.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://zhangzhuoru.gitee.io/web" target="_blank">前端攻城狮ZhuoRu</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/web/tags/html/">html</a></div><div class="post_share"><div class="social-share" data-image="/web/img/tab2.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/web/./img/wechat.png" target="_blank"><img class="post-qr-code-img" data-lazy-src="/web/./img/wechat.png" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/web/./img/alipay.jpg" target="_blank"><img class="post-qr-code-img" data-lazy-src="/web/./img/alipay.jpg" alt="支付寶"/></a><div class="post-qr-code-desc">支付寶</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/web/post/16107.html"><img class="prev-cover" data-lazy-src="/web/img/tab6.png" onerror="onerror=null;src='/web/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Butterfly启动说明书</div></div></a></div><div class="next-post pull-right"><a href="/web/post/1038.html"><img class="next-cover" data-lazy-src="/web/img/tab5.png" onerror="onerror=null;src='/web/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">css学习总结</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="https://thirdqq.qlogo.cn/g?b=sdk&amp;nk=2276839311&amp;s=140" onerror="this.onerror=null;this.src='/web/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">ZhuoRu</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/web/archives/"><div class="headline">文章</div><div class="length-num">8</div></a></div><div class="card-info-data-item is-center"><a href="/web/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div><div class="card-info-data-item is-center"><a href="/web/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/WebZhuoRu"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/WebZhuoRu" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:2276839311@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://webzhuoru.github.io/" target="_blank" title="博客"><i class="fa-solid fa-book-skull"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%87%AA%E6%88%91%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.</span> <span class="toc-text">自我介绍</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML-%E7%AC%AC%E4%B8%80%E5%A4%A9%E7%9B%AE%E6%A0%87"><span class="toc-number">2.</span> <span class="toc-text">HTML 第一天目标</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7"><span class="toc-number">3.</span> <span class="toc-text">开发工具</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%EF%BC%88%E6%98%BE%E7%A4%BA%EF%BC%89"><span class="toc-number">3.1.</span> <span class="toc-text">浏览器（显示）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E7%9C%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8D%A0%E6%9C%89%E7%9A%84%E5%B8%82%E5%9C%BA%E4%BB%BD%E9%A2%9D%EF%BC%88%E7%9F%A5%E6%99%93%EF%BC%89"><span class="toc-number">3.1.1.</span> <span class="toc-text">查看浏览器占有的市场份额（知晓）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sublime%EF%BC%88%E4%B9%A6%E5%86%99%EF%BC%89"><span class="toc-number">3.2.</span> <span class="toc-text">sublime（书写）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Photoshop-%E5%8D%8F%E5%8A%A9"><span class="toc-number">3.3.</span> <span class="toc-text">Photoshop(协助)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%AE%A4%E8%AF%86%E7%BD%91%E9%A1%B5"><span class="toc-number">4.</span> <span class="toc-text">认识网页</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E6%B5%8F%E8%A7%88%E5%99%A8%E5%86%85%E6%A0%B8%E4%BB%8B%E7%BB%8D"><span class="toc-number">5.</span> <span class="toc-text">常见浏览器内核介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%86%85%E6%A0%B8%EF%BC%88%E7%90%86%E8%A7%A3%EF%BC%89"><span class="toc-number">5.1.</span> <span class="toc-text">浏览器内核（理解）</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Web%E6%A0%87%E5%87%86%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-number">6.</span> <span class="toc-text">Web标准（重点）</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Web-%E6%A0%87%E5%87%86%E7%9A%84%E5%A5%BD%E5%A4%84"><span class="toc-number">6.1.</span> <span class="toc-text">Web 标准的好处</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Web-%E6%A0%87%E5%87%86%E6%9E%84%E6%88%90"><span class="toc-number">6.2.</span> <span class="toc-text">Web 标准构成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%BE%E5%A0%82%E4%B8%80%E7%BB%83%EF%BC%9A"><span class="toc-number">6.3.</span> <span class="toc-text">课堂一练：</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML-%E5%88%9D%E8%AF%86"><span class="toc-number">7.</span> <span class="toc-text">HTML 初识</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E9%AA%A8%E6%9E%B6%E6%A0%BC%E5%BC%8F"><span class="toc-number">7.1.</span> <span class="toc-text">HTML骨架格式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E6%A0%87%E7%AD%BE%E5%88%86%E7%B1%BB"><span class="toc-number">7.2.</span> <span class="toc-text">HTML标签分类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E6%A0%87%E7%AD%BE%E5%85%B3%E7%B3%BB"><span class="toc-number">7.3.</span> <span class="toc-text">HTML标签关系</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%BE%E5%A0%82%E4%B8%80%E7%BB%83"><span class="toc-number">7.4.</span> <span class="toc-text">课堂一练</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B-lt-DOCTYPE-gt"><span class="toc-number">8.</span> <span class="toc-text">文档类型&lt;!DOCTYPE&gt;</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E9%9B%86"><span class="toc-number">9.</span> <span class="toc-text">字符集</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML%E6%A0%87%E7%AD%BE%E7%9A%84%E8%AF%AD%E4%B9%89%E5%8C%96"><span class="toc-number">10.</span> <span class="toc-text">HTML标签的语义化</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%9C%89%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE"><span class="toc-number">10.1.</span> <span class="toc-text">为什么要有语义化标签</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE"><span class="toc-number">11.</span> <span class="toc-text">HTML常用标签</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8E%92%E7%89%88%E6%A0%87%E7%AD%BE"><span class="toc-number">11.1.</span> <span class="toc-text">排版标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%87%E9%A2%98%E6%A0%87%E7%AD%BE-%E7%86%9F%E8%AE%B0"><span class="toc-number">11.1.1.</span> <span class="toc-text">标题标签 (熟记)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AE%B5%E8%90%BD%E6%A0%87%E7%AD%BE-%E7%86%9F%E8%AE%B0"><span class="toc-number">11.1.2.</span> <span class="toc-text">段落标签( 熟记)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B0%B4%E5%B9%B3%E7%BA%BF%E6%A0%87%E7%AD%BE-%E8%AE%A4%E8%AF%86"><span class="toc-number">11.1.3.</span> <span class="toc-text">水平线标签(认识)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8D%A2%E8%A1%8C%E6%A0%87%E7%AD%BE-%E7%86%9F%E8%AE%B0"><span class="toc-number">11.1.4.</span> <span class="toc-text">换行标签(熟记)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%BE%E5%A0%82%E4%B8%80%E7%BB%83-1"><span class="toc-number">11.2.</span> <span class="toc-text">课堂一练</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#div-span%E6%A0%87%E7%AD%BE-%E9%87%8D%E7%82%B9"><span class="toc-number">11.2.1.</span> <span class="toc-text">div span标签(重点)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E7%AD%BE-%E7%86%9F%E8%AE%B0"><span class="toc-number">11.3.</span> <span class="toc-text">文本格式化标签(熟记)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E5%B1%9E%E6%80%A7"><span class="toc-number">11.4.</span> <span class="toc-text">标签属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E5%83%8F%E6%A0%87%E7%AD%BEimg-%E9%87%8D%E7%82%B9"><span class="toc-number">11.5.</span> <span class="toc-text">图像标签img (重点)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE-%E9%87%8D%E7%82%B9"><span class="toc-number">11.6.</span> <span class="toc-text">链接标签(重点)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%94%9A%E7%82%B9%E5%AE%9A%E4%BD%8D-%EF%BC%88%E9%9A%BE%E7%82%B9%EF%BC%89"><span class="toc-number">11.6.1.</span> <span class="toc-text">锚点定位 （难点）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#base-%E6%A0%87%E7%AD%BE-%E5%9F%BA%E6%9C%AC%E7%9A%84"><span class="toc-number">11.6.2.</span> <span class="toc-text">base 标签   基本的</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%BE%E5%A0%82%E4%B8%80%E7%BB%83-2"><span class="toc-number">11.7.</span> <span class="toc-text">课堂一练</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E6%A0%87%E7%AD%BE-%EF%BC%88%E7%90%86%E8%A7%A3%EF%BC%89"><span class="toc-number">11.8.</span> <span class="toc-text">特殊字符标签 （理解）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%A8%E9%87%8A%E6%A0%87%E7%AD%BE"><span class="toc-number">11.9.</span> <span class="toc-text">注释标签</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%B7%AF%E5%BE%84-%E9%87%8D%E7%82%B9%E3%80%81%E9%9A%BE%E7%82%B9"><span class="toc-number">12.</span> <span class="toc-text">路径(重点、难点)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84"><span class="toc-number">12.1.</span> <span class="toc-text">相对路径</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84"><span class="toc-number">12.2.</span> <span class="toc-text">绝对路径</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%BE%E5%A0%82%E4%B8%80%E7%BB%83-3"><span class="toc-number">12.3.</span> <span class="toc-text">课堂一练</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">13.</span> <span class="toc-text">总结</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE"><span class="toc-number">14.</span> <span class="toc-text">列表标签</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8-ul-%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-number">14.1.</span> <span class="toc-text">无序列表 ul （重点）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8-ol-%EF%BC%88%E4%BA%86%E8%A7%A3%EF%BC%89"><span class="toc-number">14.2.</span> <span class="toc-text">有序列表 ol （了解）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8%EF%BC%88%E7%90%86%E8%A7%A3%EF%BC%89"><span class="toc-number">14.3.</span> <span class="toc-text">自定义列表（理解）</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC-table-%E4%BC%9A%E4%BD%BF%E7%94%A8"><span class="toc-number">15.</span> <span class="toc-text">表格 table(会使用)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E8%A1%A8%E6%A0%BC"><span class="toc-number">15.1.</span> <span class="toc-text">创建表格</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E5%B1%9E%E6%80%A7"><span class="toc-number">15.2.</span> <span class="toc-text">表格属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E5%A4%B4%E6%A0%87%E7%AD%BE"><span class="toc-number">15.3.</span> <span class="toc-text">表头标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E7%BB%93%E6%9E%84%EF%BC%88%E4%BA%86%E8%A7%A3%EF%BC%89"><span class="toc-number">15.4.</span> <span class="toc-text">表格结构（了解）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E6%A0%87%E9%A2%98"><span class="toc-number">15.5.</span> <span class="toc-text">表格标题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC-%E9%9A%BE%E7%82%B9"><span class="toc-number">15.6.</span> <span class="toc-text">合并单元格(难点)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93%E8%A1%A8%E6%A0%BC"><span class="toc-number">15.7.</span> <span class="toc-text">总结表格</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE-%E6%8E%8C%E6%8F%A1"><span class="toc-number">16.</span> <span class="toc-text">表单标签(掌握)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#input-%E6%8E%A7%E4%BB%B6-%E9%87%8D%E7%82%B9"><span class="toc-number">16.1.</span> <span class="toc-text">input 控件(重点)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#label%E6%A0%87%E7%AD%BE-%E7%90%86%E8%A7%A3"><span class="toc-number">16.2.</span> <span class="toc-text">label标签(理解)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#textarea%E6%8E%A7%E4%BB%B6-%E6%96%87%E6%9C%AC%E5%9F%9F"><span class="toc-number">16.3.</span> <span class="toc-text">textarea控件(文本域)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95"><span class="toc-number">16.4.</span> <span class="toc-text">下拉菜单</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E5%9F%9F"><span class="toc-number">16.5.</span> <span class="toc-text">表单域</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%9F%A5%E6%96%87%E6%A1%A3"><span class="toc-number">17.</span> <span class="toc-text">查文档</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/web/post/1026.html" title="Vue3学习总结"><img data-lazy-src="/web/img/tab99.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="Vue3学习总结"/></a><div class="content"><a class="title" href="/web/post/1026.html" title="Vue3学习总结">Vue3学习总结</a><time datetime="2022-11-26T16:31:04.834Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/1666.html" title="个人简历大全 😘"><img data-lazy-src="/web/img/tab4.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="个人简历大全 😘"/></a><div class="content"><a class="title" href="/web/post/1666.html" title="个人简历大全 😘">个人简历大全 😘</a><time datetime="2022-11-26T16:31:04.810Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/1024.html" title="话费充值平台总结"><img data-lazy-src="/web/img/tab2.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="话费充值平台总结"/></a><div class="content"><a class="title" href="/web/post/1024.html" title="话费充值平台总结">话费充值平台总结</a><time datetime="2022-11-26T16:31:04.798Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/16106.html" title="填坑录"><img data-lazy-src="/web/img/tab99.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="填坑录"/></a><div class="content"><a class="title" href="/web/post/16106.html" title="填坑录">填坑录</a><time datetime="2022-11-26T16:31:04.787Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/11314.html" title="uniapp开发,遇坑填坑 😘"><img data-lazy-src="/web/img/tab5.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="uniapp开发,遇坑填坑 😘"/></a><div class="content"><a class="title" href="/web/post/11314.html" title="uniapp开发,遇坑填坑 😘">uniapp开发,遇坑填坑 😘</a><time datetime="2022-11-26T16:31:04.746Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/16107.html" title="Butterfly启动说明书"><img data-lazy-src="/web/img/tab6.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="Butterfly启动说明书"/></a><div class="content"><a class="title" href="/web/post/16107.html" title="Butterfly启动说明书">Butterfly启动说明书</a><time datetime="2022-11-26T16:31:04.729Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/web/img/tab2.png')"><div id="footer-wrap"><div class="copyright">&copy;2019 - 2022 By ZhuoRu</div><div class="footer_custom_text">I wish you to become your own sun, no need to rely on who's light.<p><a target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a>&nbsp;<a target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a>&nbsp;<a target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a> &nbsp;<a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署，默认线路托管于Vercel"></a>&nbsp;<a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署，联通线路托管于Coding"></a>&nbsp;<a target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管"></a>&nbsp;<a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><a class="icon-V hidden" onclick="switchNightMode()" title="浅色和深色模式转换"><svg width="25" height="25" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/web/js/utils.js"></script><script src="/web/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/web/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>(()=>{
  const $countDom = document.getElementById('twikoo-count')
  const init = () => {
    twikoo.init(Object.assign({
      el: '#twikoo-wrap',
      envId: 'https://wechat-delta.vercel.app/',
      region: 'ap-guangzhou'
    }, null))
  }

  const getCount = () => {
    twikoo.getCommentsCount({
      envId: 'https://wechat-delta.vercel.app/',
      region: 'ap-guangzhou',
      urls: [window.location.pathname],
      includeReply: false
    }).then(function (res) {
      $countDom.innerText = res[0].count
    }).catch(function (err) {
      console.error(err);
    });
  }

  const loadTwikoo = (bool = false) => {
    if (typeof twikoo === 'object') {
      init()
      bool && $countDom && setTimeout(getCount,0)
    } else {
      getScript('https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(()=> {
        init()
        bool && $countDom && setTimeout(getCount,0)
      })
    }
  }

  if ('Twikoo' === 'Twikoo' || !true) {
    if (true) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
    else loadTwikoo(true)
  } else {
    window.loadOtherComment = () => {
      loadTwikoo()
    }
  }
})()</script></div><canvas id="universe"></canvas><div class="aplayer no-destroy" data-id="7592292364" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-loop="all" data-lrctype="0"> </div><script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script><script defer src="./js/universe.js"></script><script defer src="./js/sun_moon.js"></script><script defer src="https://fastly.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer data-pjax src="/js/wow_init.js"></script><script defer src="https://fastly.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})


document.addEventListener('pjax:send', function () {
  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;post/1026.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/tab99.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/1026.html&quot;);" href="javascript:void(0);" alt="">Vue3学习总结</a><div class="blog-slider__text">前端内卷的开始,Vue3开发上手总结</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;post/1026.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;post/1038.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/tab5.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/1038.html&quot;);" href="javascript:void(0);" alt="">css学习总结</a><div class="blog-slider__text">课程目标:1. 学会使用CSS选择器2. 熟记CSS样式和外观属性3. 熟练掌握CSS各种选择器4. 熟练掌握CSS各种选择器5. 熟练掌握CSS三种显示模式6. 熟练掌握CSS背景属性7. 熟练掌握CSS三大特性8. 熟练掌握CSS盒子模型9. 熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSS</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;post/1038.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;post/16107.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/tab6.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/16107.html&quot;);" href="javascript:void(0);" alt="">Butterfly启动说明书</a><div class="blog-slider__text">启动说明书</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;post/16107.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;post/2020715.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/tab2.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/2020715.html&quot;);" href="javascript:void(0);" alt="">html学习总结</a><div class="blog-slider__text">学习目标:了解常用浏览器;掌握WEB标准;理解标签语义化;掌握常用的排版标签;掌握常用的文本格式化图像链接等标签;掌握三种列表标签;掌握表格标签;掌握表格标签;掌握表单标签</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;post/2020715.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>